import React from 'react';
import {parsePercent, numberHandle} from '~/utils/number';

import CommonEchart from '../../common/CommonEchart';
import withPannel from './withPannel';

const tooltipCallback = params => {
    const {marker, name, value, percent} = params;
    return `${name}: ${numberHandle(value, 2)}<br/>占比: ${percent}%`;
};

const labelFormatter = params => {
    const {name, percent} = params;
    if (percent < 5) {
        return;
    }
    return `${name}: ${percent}%`;
};

const extendOptions = {
    tooltip: {
        trigger: 'item',
        formatter: tooltipCallback
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: 'middle',
        type: 'scroll',
        align: 'left'
    },
    series: {
        common: {
            radius: '55%',
            center: ['40%', '50%'],
            label: {formatter: labelFormatter},
            // emphasis: {
            //     itemStyle: {
            //         shadowBlur: 10,
            //         shadowOffsetX: 0,
            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            // }
        }
    }
};

const StudentChart = props => {
    const {dataSource, unitId} = props;
    return (
        <CommonEchart
            {...props}
            id={unitId}
            extendEchartsOptions={extendOptions}
            dataSource={dataSource}
        />
    );
};

export default withPannel(StudentChart);
